<template>
    <div class="select_class">
        <header >
            <a @click="$api.goBack()" class="back"></a>
            <span>课程管理</span>
            <a class="add" @click="showDetail()" v-if="useInfo.tsMenuList[4].voOperate.addObj" >添加</a>
        </header>
        <ul >
            <li v-for="(item,index) in showData" @click="showDetail(index)">
                <div class="main" >
                    <div class="head">
                        <img  :src="$api.formatterImg(item.lessonPhoto)" />
                    </div>
                    <div class="classroom">
                        <div class="className">{{item.lessonName}}</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    
</template>

<script>
    export default {
        data() {
            return {
                pageSize: 1000,
                pageNum: 1,
                showData: [],
                useInfo: {},
            }
        },
        computed: {
            siteData: function() {
                var array = [];
                let AllZiMu = this.showData.map(x => { //从 showData里面提取以sortName为子对象的数组
                    return x.sortName
                })
                AllZiMu = AllZiMu.filter((element, index, self) => { //过滤相同子节点
                    return self.indexOf(element) === index;
                })
                return AllZiMu;
                // this.showData.forEach(element => {


                // });
            }
        },
        created() {
            this.getUserInfo();
            this.getDetail();
        },
        methods: {
            getUserInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'))
            },
            showDetail(index) { //查看课程详情,添加或编辑课程
                this.$api.clearItem();
                if (index || index == 0) {
                    var detail = this.showData[index];
                    sessionStorage.setItem('lessonDetail', JSON.stringify(detail));
                }
                this.$router.push({
                    path: 'g15_1'
                })
            },
            getDetail() {
                var url = "/lesson/selectPage"
                var params = {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum
                }
                this.$api.post(url, params, (data) => {
                    this.showData = data.info.list
                })
            }
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>